<template>
  <div>
    <el-form :inline="true" label-width="68px">
      <el-form-item label="姓名">
        <el-input v-model="query.name" placeholder="请输入"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button :icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
            type="primary"
            plain
            :icon="Plus"
            size="mini"
            @click="handleAdd"
        >新增
        </el-button>
      </el-form-item>
    </el-form>

    <div style="padding-top: 10px">
      <el-table v-loading="loading" :data="list" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column label="封面">
          <template #default="scope">
            <el-image
                style="width: 38px; height: 38px; border-radius: 25px"
                :src="scope.row.img"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-teleported="true"
                :preview-src-list="[scope.row.img]"
                :initial-index="4"
                fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160px">
          <template #default="scope">
            <el-button size="small"
                       type="success"
                       text
                       :icon="Edit"
                       @click="handleEdit(scope.row)"
            >修改
            </el-button>
            <el-button
                size="small"
                type="danger"
                text
                :icon="Delete"
                @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :total="total" @pageChange="page"></Pagination>

      <el-dialog
          v-model="dialogVisible"
          :title="title"
          width="1000px">
        <el-form ref="form" :rules="rules" :label-position="labelPosition" label-width="140px" :model="ruleForm">
          <el-form-item label="封面">
            <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="file.headers"
                :action="file.uploadFileUrl"
            >
              <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="姓名" prop="grjsdj">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="grjszw">
            <el-input v-model="ruleForm.age"></el-input>
          </el-form-item>
        </el-form>


        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script lang="ts" setup>
import {Search, Refresh, Plus, Edit, Delete} from '@element-plus/icons-vue'
import {lists,add,edit,del} from "@/api/demo";
import Pagination from '@/components/pagination.vue';
import {onBeforeUnmount, onMounted, reactive, ref, shallowRef} from 'vue';
import type {FormRules} from 'element-plus'
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {UploadProps} from "element-plus";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
const labelPosition = ref('right');
const type = ref(1);
const list = ref([])
const total = ref(0);
const loading = ref(false);
const dialogVisible = ref(false);
const title = ref('');
const form = ref(null);
const options = ref([])
const file =reactive({
  uploadFileUrl: "http://localhost:8001" + '/upload',
  headers: {
    Authorization: localStorage.getItem("token"),
  },
})
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  ruleForm.img = response.data.urlIp
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
const getTypeLabel1 = (value) => {
  const option = options.value.find(option => option.value == value);
  return option ? option.label : '';
}
const ruleForm = reactive({

});
const query = reactive({
  page: 1,
  pageSize: 10,
  name: '',
});
const resetQuery = () => {
  query.name = ''
  getlist()
}
const rules = reactive<FormRules>({

})


const page = (e) => {
  query.page = e.currentPage;
  query.pageSize = e.pageSize;
  getlist()
}

const handleAdd = () => {
  title.value = '添加'
  dialogVisible.value = true
  type.value = 1;
  reset();
}
const reset = () => {
  Object.keys(ruleForm).forEach(key => {
    ruleForm[key] = '';
  });
}

const handleQuery = () => {
  getlist()
}

const getlist = () => {
  loading.value = true;
  lists(query).then(res=>{
    list.value = res.data;
    total.value = res.total;
    loading.value = false;
  })
}

const submitForm = () => {
  form.value.validate(valid => {
    if (valid) {
      if (type.value == 1) {
        //添加
        add(ruleForm).then(res=>{
          getlist();
          dialogVisible.value = false;
        })
      } else {
        edit(ruleForm).then(res=>{
          getlist();
          dialogVisible.value = false;
        })
      }
    }
  })
}
const handleDelete = (data) => {
  ElMessageBox.confirm(
      '确定要删除吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        del(data.id).then(r => {
          getlist();
          dialogVisible.value = false;
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}

const handleEdit = (data) => {
  title.value = "修改";
  dialogVisible.value = true;
  type.value = 2;
  getform(data)
}

const getform = (data) => {
  Object.assign(ruleForm, data);
}

onMounted(() => {
  getlist();
})
</script>

<style scoped>

</style>
<style>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  border-radius: 25px;
  width: 80px;
  height: 80px;

}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
</style>
